<template>
    <el-dialog v-model="visible" title="修改用户信息" @close="cancelSubmit()">
        <el-form :model="dataform" ref="dataFormRef" :rules="dataRules" label-width="100px">
            <el-form-item label="用户账号" prop="userName">
                <el-input v-model="dataform.userName" autocomplete="off" placeholder="请输入用户名" label-width="100px"></el-input>
            </el-form-item>

            <el-form-item label="用户名称" prop="nickName">
                <el-input v-model="dataform.nickName" autocomplete="off" placeholder="请输入用户昵称" label-width="100px"></el-input>
            </el-form-item>

            <el-form-item label="用户角色" prop="roleId">
					<el-select v-model="dataform.roleId" placeholder="请选择用户角色" style="width: 100%" clearable filterable>
							<el-option v-for="option in roleList" :key="option.id" :label="option.name" :value="option.id"></el-option>
					</el-select>
				</el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" align="center">
            <el-button @click="cancelSubmit()">取 消</el-button>
            <el-button type="primary" @click="submitForm()">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script setup>
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { editUser,getAllRoles } from "@/api/admin/index";
const emit = defineEmits(['refreshDataList'])
const visible=ref(false)
const dataform=reactive({
    id:'',
    userName:'',
    nickName:'',
    roleId:0
})

const dataFormRef=ref()
const init = (row) => {
    visible.value = true
    //回显对应用户信息
    dataform.id=row.id
	dataform.userName=row.userName
    dataform.nickName=row.nickName
    dataform.roleId=Number(row.roleId)
    //打开弹框调用方法获取角色信息
    getUserRoleList();
}

const roleList=ref()
//获取一个角色集合
const getUserRoleList=()=>{
    getAllRoles().then(res=>{
		roleList.value=res.data})
}

//取消提交
const cancelSubmit=()=>{
    dataFormRef.value.resetFields(),
    visible.value = false
}

//表单校验
const dataRules = ref({
	userName:[{required: true, message: '用户名不能为空', trigger: 'blur'}],
	nickName:[{required: true, message: '用户昵称不能为空', trigger: 'blur'}],
    roleId:[{required: true, message: '用户角色不能为空', trigger: 'blur'}],
    password:[{required: true, message: '用户密码不能为空', trigger: 'blur'}]
})

//表单提交
const submitForm=()=>{
    dataFormRef.value.validate((valid) => {
		if (!valid) {
            console.log('error submit!!');
			return false
		}

		editUser(dataform).then((data) => {
            if(data.status==200){
                ElMessage.success({
                    message: data.data,
                    duration: 500,
                    onClose: () => {
                        visible.value = false
                        dataFormRef.value.resetFields()
                        emit('refreshDataList')
                    }
                })

            }else{
                ElMessage.error({
                    message:data.message
                })
            }
		})
	})
}

//暴露init方法
defineExpose({
	init
})
</script>
<style>
</style>